<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/1.css">
    <style>
        #template{display: none;}
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="box1">
        <div class="nav">
            <div class="nav1">
                <img src="img/1/1.1.png" alt="">
                <p>网络全案营销服务提供商</p>
            </div>
            <ul class="nav2">
                <li class="show">网站首页</li>
                <li>传说资源</li>
                <li>传悦案例</li>
                <li>传悦服务</li>
                <li>解决方案</li>
                <li>需求提交</li>
            </ul>
            <div class="nav3"><img src="img/1/1.2.png" alt=""></div>
        </div>
    </div>
    <!-- 大图   -->
    <div class="box2">
        <div>
            <p>网站首页&nbsp;>&nbsp;传阅案例</p>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <ul class="content1">
            <li class="show">全部</li>
            <li>网站建设</li>
            <li>推广运营</li>
            <li>品牌策划</li>
            <li>网络全案</li>
        </ul>
        <ul class="content2">
            <li id="template">
                <img src="img/1/3.1.png"alt="">
                <p></p>
                <span></span>
            </li>
        </ul>
        <div class="content3">
            <ul>
                <li><</li>
                <li>1</li>
                <li class="show">2</li>
                <li>3</li>
                <li>4</li>
                <li>></li>
            </ul>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer1">
            <img src="img/1/4.1.png" alt="">
            <div class="footer2">
                <ul>
                    <li>关于传说</li>
                    <li>新闻动态</li>
                    <li>传阅观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <p>Copyright 2013 创梦网络科技有限责任公司&nbsp;&nbsp;||&nbsp;&nbsp;传悦 Chnyoo.cn All Rights Reserved&nbsp;&nbsp;&nbsp;京ICP备12005221号</p>
            </div>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $.ajax({
            url:"http://127.0.0.1:81/getnewsList",
            success(data){
                for(let i = 0;i < 2;i++){
                     data.forEach(item => {
                        let newLi = $("#template").clone();
                        newLi.attr("id",item.id).find("img")
                        newLi.find("img").attr("src",item.imgs);
                        newLi.find("p").html(item.p1)
                        newLi.find("span").html(item.span)
                        newLi.appendTo(".content2")
                    });
                }
                 $(".content2 li").click(function(){
                    let index = $(this).index();
                    console.log(index)
                    let num = (index - 1) % 8
                    window.location.href=`xiangqing.html?id=${num}`;
                })
                console.log(data)
            }
        })
       
    </script>
</body>
</html>